<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="padding-top:10px">
		<el-form :inline="true" :model="filters" :size="size" label-width="100px">
			<el-row style="text-align: left;">
				<el-form-item label="关键字搜索">
				  <el-input v-model="filters.queryname" placeholder="关键字搜索"></el-input>
				</el-form-item>
			</el-row>
			<el-row style="text-align: left;">
				<el-form-item>
					<kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
				</el-form-item>
				<el-form-item>
					<kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
				</el-form-item>
				<el-form-item style="float:right">
					<el-button-group>
					<el-tooltip content="刷新" placement="top">
						<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
					</el-tooltip>
					<el-tooltip content="列显示" placement="top">
						<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
					</el-tooltip>
					<el-tooltip content="导出" placement="top">
						<el-button icon="fa fa-file-excel-o"  @click="downloadExcel" ></el-button>
					</el-tooltip>
					</el-button-group>
				</el-form-item>
			</el-row>
			
		</el-form>
	</div>
	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<!--表格显示列界面-->
		<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" 
			@handleFilterColumns="handleFilterColumns"> 
		</table-column-filter-dialog>
	</div>
	<!--表格内容栏-->
	<cy-table :height="350"
		:data="pageResult" :columns="filterColumns"
		@findPage="findPage" showDetailOperation @handleDetail="handleDetail" ref="CyTable" :showEditOperation="false" :showDeleteOperation="false" 
		:showBatchDelete="false">
	</cy-table>
	<!--新增编辑界面-->
	<el-dialog :title="operation?'详情':'详情'" width="25%" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose">
		<el-form :model="dataForm" label-width="120px" ref="dataForm" :size="size"
			label-position="right" inline style="text-align:center;">

			<el-row>
             <el-col :span="8" >
				 <div class="grid-content bg-purple">
						调整类型：		
				</div>
			 </el-col>
			 <el-col :span="16" >
				 <div class="grid-content bg-purple-light">
					 {{dataForm.types}}
				 </div>
			 </el-col>
			</el-row>

			<el-row>
			  <el-col :span="8" >
				 <div class="grid-content bg-purple">
						模块：		
				</div>
			  </el-col>
			  <el-col :span="16" >
				 <div class="grid-content bg-purple-light">
					 {{dataForm.modulename}}
				 </div>
			  </el-col>
			</el-row>

			<el-row>
				<el-col :span="8" >
				 <div class="grid-content bg-purple">
						权限：		
				</div>
			  </el-col>
			  <el-col :span="16" >
				 <div class="grid-content bg-purple-light">
					 {{dataForm.subcode}}
				 </div>
			  </el-col>
			</el-row >

			<el-row>
				<el-col :span="8" >
				 <div class="grid-content bg-purple">
						调整项：		
				</div>
			  </el-col>
			  <el-col :span="16">
				 <div class="grid-content bg-purple-light">
					{{dataForm.menuname}}
				 </div>
			  </el-col>
			</el-row>
			
		</el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center">
			<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
		</div>
	</el-dialog>
   
  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import CyTable from "@/views/Core/CyTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
import axios from 'axios'
export default {
	components:{
		PopupTreeInput,
		CyTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
			imgUpload:this.utils.getUpLoadHost(),
			size: 'small',
			document_license:'',
			filters: {
				name: ''
			},
			
			imgs:'',
			fileList:{},
			columns: [], 
			shoplist:[] , 
			filterColumns: [],
			selected:"",
			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {},
			dialogImageUrl: '',
			
			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			printPage: false,
			
			dataForm: {
				types:'',
				modulename:'',
				subcode:'',
				menuname:'',
			},			
		}
	},
	methods: {
	   // 获取分页数据
		findPage: function (data) {
			 this.filters.t='sysRoleMenuLog'
			this.$refs.CyTable.findPage(this.filters) 
		},
		// 初始化
		queryUserList(){
			var that=this;
			this.utils.request.queryUserList({'t':'shop'},function(data){
				that.shoplist=data.data
			})
		},
		handleDetail(data){
			var id=data.row.id
			var that=this;
            this.utils.request.queryUserInfo({'t':'sysRoleMenuLog','id':id},function(data){
				that.dataForm.types = data.data.types
				that.dataForm.modulename = data.data.modulename
				that.dataForm.subcode = data.data.subcode
				that.dataForm.menuname = data.data.menuname
			
			})
			this.dialogVisible=true
		},
        //弹窗关闭方法
		handleClose (){
			 this.$refs.dataForm.resetFields()
		},
		//复选框选中
		selectionChange (data){
           this.selected=data.selections
		},
      //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => { 
			let filename="新手注册活动"
			this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename)
          }).catch(() => {
 
          });
		},

		reset:function(){
		   this.filters={};
		   this.findPage()
		},

		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},

		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				//{prop:"id", label:"ID", minWidth:50},
				{prop:"id", label:"ID", minWidth:120},
				{prop:"rolename", label:"影响角色", minWidth:120},
				{prop:"create_time", label:"权限调整时间", minWidth:120},
				{prop:"username", label:"操作人", minWidth:120},
			]
			  var temp = [];
            $.each(this.columns,function(key, val){           
               temp.push(val)
            }) 
            this.filterColumns = temp;  
      	},
       status: function(row, column, cellValue, index){
			if(cellValue==1){
				return '生效'
			}else if(cellValue==0){
				return '失效'
		   }
	   }
	   
	},
	mounted() {
		this.findPage()
		this.initColumns()
		this.queryUserList()
	}
	
}
</script>

<style scoped>
 /deep/ .el-input__inner {
    width: 200px;
}
 .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
.bg-purple-light {
    background: #e5e9f2;
  }
.bg-purple {
background: #d3dce6;
}
 .grid-content {
    border-radius: 0px;
    min-height: 36px;
  }

</style>